<template>
  <crumbs></crumbs>
  <div class="wrapper">
    <h6 style="color: red">(*非admin用户名登录的角色就是普通用户user)</h6>
    <h5>当前角色：{{ permissRole }}</h5>
    <el-button-group>
      <el-button :type="permissRole === 'admin' ? 'primary' : ''" @click="changeRole('admin')"
        >admin</el-button
      >
      <el-button :type="permissRole === 'user' ? 'primary' : ''" @click="changeRole('user')"
        >user</el-button
      >
    </el-button-group>
    <h5>按钮权限</h5>
    <el-button
      type="primary"
      :disabled="permissRole !== 'admin'"
      @click="ElMessage.success('admin')"
      >admin</el-button
    >
    <el-button type="primary" :disabled="permissRole !== 'user'" @click="ElMessage.success('user')"
      >user</el-button
    >
    <h5>指令权限</h5>
    <el-button v-permiss="'admin'" @click="ElMessage.success('admin')">admin</el-button>
    <el-button v-permiss="'user'" @click="ElMessage.success('user')">user</el-button>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { usePermissStore } from '@/store/permiss'
import { ElMessage } from 'element-plus'

const permissStore = usePermissStore()
const { permissRole } = storeToRefs(permissStore)

const changeRole = (role: string) => {
  permissStore.handleSet(role)
  location.reload()
}
</script>

<style scoped lang="less">
h5 {
  margin: 10px 0;
}
</style>
